<template>
    <form>
      <div v-if="alert?.success" class="alert alert-success">
        {{ alert.success }}
      </div>
      <div v-if="alert?.error" class="alert alert-danger">{{ alert.error }}</div>
      <div class="mb-3">
        <label>标题</label>
        <input type="text" v-model="uResource.title" class="form-control" placeholder="标题..." />
    </div>
    <div class="mb-3">
        <label>描述</label>
        <textarea class="form-control" v-model="uResource.body" placeholder="描述"></textarea>
    </div>
    <hr class="mb-4" />
    <button @click="submitForm" class="btn btn-primary btn-lg btn-block" type="button">提交</button>
    </form>
  </template>
  <script>
  import { ref, watch } from "vue";
  
  export default {
    props: {
      resource: Object,
      alert: Object,
    },
    setup(props, context) {
      const uResource = ref(props.resource);
      watch(
        () => props.resource,
        (resource, prevResource) => {
          uResource.value = resource;
        }
      );
      const submitForm = () => {
        context.emit("onFormSubmit", uResource);
      };
  
      return {
        uResource,
        submitForm,
      };
    },
  };
  </script>
  